<template>
    <div class="signUp">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="sign"></i>
            <span>立即报名</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="signUp-center">
            <div class="message">
                <span>姓名</span>
                    <input type="text" placeholder="请输入你的名字" v-model="userName">
                </div>
                <div class="message">
                    <span>联系电话</span>
                    <input type="tel" maxlength="11" v-model="userPhone" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入你的电话号码">
                </div>
                <div class="agency">
                    <span>您的优势</span>
                    <div class="Release-Text">
                        <textarea autofocus rows="0" cols="value" placeholder="请说明您的优势" maxlength="500" v-model="textName">{{textName}}</textarea>
                        <span>{{figure}}/500</span>
                    </div>
                </div>
                <div class="box-buttom">
                    <button @click="signImmediately">提交</button>
                </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      textName: "",
      query: {},
      userName: "",
      userPhone: "",
      textName: ""
    };
  },
  computed: {
    figure() {
      return this.textName.length;
    }
  },
  created() {
    this.query = this.$route.query;
  },
  methods: {
    sign() {
      if (!this.$route.query.url) {
        this.$router.push({
          path: "/TaskDetailsTs",
          query: { name: this.$route.query.name, id: this.$route.query.id }
        });
      } else {
        this.$router.push({
          path: "/TaskDetailsT",
          query: { name: this.$route.query.name, id: this.$route.query.id }
        });
      }
    },
    //立即报名
    signImmediately() {
      var sectedId =localStorage.getItem("sectedId");
      if (this.userName == "") {
        Toast("请输入姓名");
      } else if (this.userPhone == "") {
        Toast("请输入联系电话");
      } else if (this.textName == "") {
        Toast("请输入你的优势");
      } else {
        this.$axios
          .post("/cct/apply/registration", {
            jobId: Number(this.query.id),
            jobName: this.query.name,
            userId: sectedId?sectedId:0,
            userName: this.userName,
            userTel: this.userPhone,
            userAdvantage: this.textName
          })
          .then(res => {
            if (res.data.data == 0) {
              //  Toast(res.data.msg)
              this.$router.push({
                path: "/TaskDetailsTs",
                query: {
                  success: true,
                  id: this.query.userId
                }
              });
            } else if (res.data.data == 1) {
              Toast("您已经报过名字了");
            } else if (res.data.data == 2) {
              Toast("实名认证后才可以领取任务哦~");
              this.$router.push({
                path: "/Autonym",
                query: { theme: "实名认证", url: "/signUp", id: this.query.id }
              });
            }
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.signUp {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333333;
    height: 1.25rem;
    line-height: 1.25rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
    border-bottom: 0.01rem solid #f8f8f8;
  }
  .signUp-center {
    width: 6.42rem;
    height: 8.5rem;
    margin: 0 auto;
    border: 0.1px solid #ffffff;
    .message {
      width: 6.42rem;
      height: 0.7rem;
      margin-top: 0.3rem;
      line-height: 0.7rem;
      display: flex;
      border-bottom: 0.01rem solid #f8f8f8;
      span {
        font-size: 0.26rem;
        font-family: "PingFang-SC-Medium";
        font-weight: bold;
        color: #333333;
        vertical-align: top;
        display: block;
        width: 2rem;
        height: 0.7rem;
      }
      input {
        font-size: 0.26rem;
        color: #999999;
        font-family: "PingFang-SC-Medium";
        font-weight: Medium;
      }
    }
    .agency {
      width: 6.42rem;
      height: 0.7rem;
      margin-top: 0.3rem;
      line-height: 0.7rem;
      span {
        font-size: 0.26rem;
        font-family: "PingFang-SC-Medium";
        font-weight: bold;
        color: #333333;
        vertical-align: top;
        display: block;
        height: 0.7rem;
      }
      .Release-Text {
        width: 6.42rem;
        height: 3.4rem;
        margin: 0rem auto;
        position: relative;
        textarea {
          color: #333;
          font-size: 0.26rem;
          width: 100%;
          height: 3.4rem;
          background: #f8f8f8;
          resize: none;
          padding: 0.24rem 0.24rem;
        }
        span {
          position: absolute;
          top: 2.7rem;
          left: 5.5rem;
          font-size: 0.22rem;
          color: #c3c3c3;
        }
      }
    }
    .box-buttom {
      // margin-top: 3rem;
      button {
        font-size: 0.36rem;
        color: #ffffff;
        background-color: #38a83f;
        width: 5.9rem;
        height: 0.8rem;
        border-radius: 0.4rem;
        margin: 4rem 0.08rem 0rem 0.08rem;
      }
    }
  }
}
</style>

